import React from 'react';
import './home.less'
import axios from 'axios'
import scroll from '../../utils/scroll.js'
import Bgscroll from './bgscroll'
import Hheader from '../public/header/header'
import { HashRouter, NavLink, Route, Switch, Redirect } from 'react-router-dom'
import { connect } from 'react-redux'
import { getBgList } from '../../redux/action/listbg'
import Sy from "../sy/sy";
import Rs from "../rs/rs";
import Life from "../life/life";
import About from "../about/about";
import Js from "../js/js";
import Foot from '../public/foot/foot'
import More from "../more/more";
import Des from "../des/des";
import Muser from "../user/user";
import Minfo from '../sy/minfo/minfo'
import AnimateSwitch from "../public/AnimateSwitch/AnimateSwitch";
import { TransitionGroup, CSSTransition } from 'react-transition-group'
const useState = React.useState;
const useEffect = React.useEffect;
const useCallback = React.useCallback;
const useRef = React.useRef;
function Home(props) {
    //声明背景图片数据
    // let [bglist,setbgList]:[Array<string>,Function] = useState([]);
    let { location } = props;
    let contentRef = useRef();
    //开始获取数据

    //渲染模板
    return (
        <div id="home">
            {/*<Bgscroll list={gbglist}/>*/}
            <div className="home-warp" ref={contentRef}>
                <Bgscroll />
                <img src="./img/backt.svg" className="backT" onClick={() => {
                    var t = setInterval(() => {
                        if (document.documentElement.scrollTop == 0) {
                            document.documentElement.scrollTop = 0;
                            clearInterval(t)
                        }
                        document.documentElement.scrollTop -= 60;
                    }, 10)

                }} />
                <Hheader></Hheader>
                <Minfo></Minfo>
                <div className="home-content" >
                    <TransitionGroup>
                        <CSSTransition
                            key={location.pathname}
                            classNames={'fade'}
                            timeout={300}
                        >
                            <Switch location={location}>
                                <Route component={Sy} path='/home/sy' />
                                <Route component={Rs} path='/home/rs' />
                                <Route component={Life} path='/home/life' />
                                <Route component={About} path='/home/about' />
                                <Route component={Js} path='/home/js' />
                                <Route component={More} path='/home/more' />
                                <Route component={Des} path='/home/des' />
                                <Route component={Muser} path='/home/user' />
                                <Redirect to='/home/sy' />
                            </Switch>
                        </CSSTransition>
                    </TransitionGroup>
                </div>
                <Foot></Foot>
            </div>
        </div>

    )
}

export default Home
